<template>
  <div>
    <!-- 添加抽屉 -->
    <a-drawer :title="title" class="drawer" :placement="placement" width="580px" :visible="visible" @close="visible = false">
      <div>
        规则名称
        <a-input style="width: 220px; margin-left: 15px" placeholder="请输入" v-model="name" />
      </div>
      <div style="margin-top: 20px">
        <div class="shu">
          <div class="shuxian"></div>
          <div style="color: #000000; font-size: 16px; margin-left: 10px">工价计算</div>
        </div>
      </div>
      <a-radio-group v-model="ruleType" style="margin-top: 20px" @change="tabsChange">
        <a-radio-button value="1" style="width: 104px; text-align: center"> 计时制 </a-radio-button>
        <!-- <a-radio-button value="0" style="width: 104px; text-align: center">
          同工同酬
        </a-radio-button> -->
        <a-radio-button value="4" style="width: 104px; text-align: center">
          计天制
        </a-radio-button>
      </a-radio-group>
      <div v-if="ruleType === '4'">
        <!-- 工价计算新增条件 -->
        <div style="margin-top: 20px">
          工价
          <a-input-number :min="0" style="width: 88px; margin: 0 5px" v-model="hourAmountDouble" />
          元/天
          <a-dropdown style="margin-left: 10px">
            <a-menu slot="overlay" @click="handleMenuClick1">
              <a-menu-item key="2"> 满月/天变更工价 </a-menu-item>
              <a-menu-item key="1"> 固定日期变更工价 </a-menu-item>
            </a-menu>
            <a-button type="primary" ghost><a-icon type="plus" />新增变更条件</a-button>
          </a-dropdown>
        </div>
        <div style="margin-top: 15px" v-for="(item, index) in labourList" :key="index">
          <span v-if="item.type === '2'">
            入职满
            <a-input-number :min="0" style="width: 88px; margin: 0 5px" v-model="item.number" />
            <a-select style="width: 108px; margin: 0 5px" v-model="item.units">
              <a-select-option v-for="(item, index) in option2" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
            工价变为
            <a-input-number style="width: 88px; margin: 0 5px" :min="1" v-model="item.newHourAmount" />
            元/天
          </span>

          <span v-if="item.type === '1'">
            自
            <a-date-picker
              style="margin: 0 5px"
              :value="item.time ? moment(item.time, 'YYYY-MM-DD') : ''"
              @change="(date, dateString) => onDateChange(date, dateString, item)"
            />
            工价变为
            <a-input-number style="width: 88px; margin: 0 5px" :min="1" v-model="item.newHourAmount" />
            元/天
          </span>
          <a-icon class="deleteIcon" type="delete" style="font-size: 18px; margin-left: 10px" @click="deletelabourList(item, index)" />
        </div>
        <!-- 一次性红包新增条件 -->
        <div style="margin-top: 20px">
          <div class="shu">
            <div class="shuxian"></div>
            <div style="color: #000000; font-size: 16px; margin-left: 10px">额外规则</div>
          </div>
        </div>
        <a-checkbox :checked="checked" @change="onChange" style="margin-top: 10px">
          一次性红包
        </a-checkbox>
        <div style="margin-top: 10px" v-for="(item, index) in numList" :key="'info1-' + index">
          满
          <a-input-number :min="0" style="width: 88px; margin: 0 5px" v-model="item.number" />
          <a-select style="width: 108px; margin: 0 5px" v-model="item.units">
            <a-select-option v-for="(item, index) in option2" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
          发放
          <a-input-number style="width: 88px; margin: 0 5px" :min="1" v-model="item.redPacketAmount" />
          元红包
          <a-icon class="deleteIcon" type="delete" style="font-size: 18px; margin: 0 5px" @click="deleteNumList(item, index)" />
          <a-icon class="addIcon" type="plus-circle" style="font-size: 18px; margin-left: 10px" @click="createNumList" />
        </div>
        <!-- 离职倒扣新增条件 -->
        <div>
          <a-checkbox :checked="checked1" @change="onChange1" style="margin-top: 15px">
            离职倒扣
          </a-checkbox>
        </div>
        <div style="margin: 15px 0" v-if="checked1">
          <a-dropdown>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1"> 不满月/天倒扣工资 </a-menu-item>
              <a-menu-item key="2"> 不满月/天减少全价 </a-menu-item>
            </a-menu>
            <a-button type="primary" ghost><a-icon type="plus" />新增倒扣条件</a-button>
          </a-dropdown>
        </div>
        <div style="margin-top: 15px" v-for="(item, index) in leaveList" :key="'info2-' + index">
          不满
          <a-input-number :min="0" style="width: 88px; margin: 0 5px" v-model="item.number" />
          <a-select style="width: 108px; margin: 0 5px" v-model="item.units">
            <a-select-option v-for="(item, index) in option2" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
          <span v-if="item.type === '1'">
            倒扣
            <a-input-number style="width: 88px; margin: 0 5px" :min="1" v-model="item.deductAmount" />
            元工资
          </span>
          <span v-if="item.type === '2'">
            工价变为
            <a-input-number style="width: 88px; margin: 0 5px" :min="1" v-model="item.newHourAmount" />
            元/天
          </span>
          <a-icon class="deleteIcon" type="delete" style="font-size: 18px; margin-left: 10px" @click="deleteleaveList(item, index)" />
        </div>
      </div>
      <div v-if="ruleType === '1'">
        <!-- 工价计算新增条件 -->
        <div style="margin-top: 20px">
          工价
          <a-input-number style="width: 88px; margin: 0 5px" v-model="hourAmountDouble" :min="0" />
          元/小时
          <a-dropdown style="margin-left: 10px">
            <a-menu slot="overlay" @click="handleMenuClick1">
              <a-menu-item key="2"> 满月/天/工时变更工价 </a-menu-item>
              <a-menu-item key="1"> 固定日期变更工价 </a-menu-item>
            </a-menu>
            <a-button type="primary" ghost><a-icon type="plus" />新增变更条件</a-button>
          </a-dropdown>
        </div>
        <div style="margin-top: 15px" v-for="(item, index) in labourList" :key="index">
          <span v-if="item.type === '2'">
            入职满
            <a-input-number :min="0" style="width: 88px; margin: 0 5px" v-model="item.number" />
            <a-select style="width: 108px; margin: 0 5px" v-model="item.units">
              <a-select-option v-for="(item, index) in option" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
            工价变为
            <a-input-number style="width: 88px; margin: 0 5px" :min="1" v-model="item.newHourAmount" />
            元/小时
          </span>

          <span v-if="item.type === '1'">
            自
            <a-date-picker
              style="margin: 0 5px"
              :value="item.time ? moment(item.time, 'YYYY-MM-DD') : ''"
              @change="(date, dateString) => onDateChange(date, dateString, item)"
            />
            工价变为
            <a-input-number style="width: 88px; margin: 0 5px" :min="1" v-model="item.newHourAmount" />
            元/小时
          </span>
          <a-icon class="deleteIcon" type="delete" style="font-size: 18px; margin-left: 10px" @click="deletelabourList(item, index)" />
        </div>
        <!-- 一次性红包新增条件 -->
        <div style="margin-top: 20px">
          <div class="shu">
            <div class="shuxian"></div>
            <div style="color: #000000; font-size: 16px; margin-left: 10px">额外规则</div>
          </div>
        </div>
        <a-checkbox :checked="checked" @change="onChange" style="margin-top: 10px">
          一次性红包
        </a-checkbox>
        <div style="margin-top: 10px" v-for="(item, index) in numList" :key="'info1-' + index">
          满
          <a-input-number :min="0" style="width: 88px; margin: 0 5px" v-model="item.number" />
          <a-select style="width: 108px; margin: 0 5px" v-model="item.units">
            <a-select-option v-for="(item, index) in option" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
          发放
          <a-input-number style="width: 88px; margin: 0 5px" :min="1" v-model="item.redPacketAmount" />
          元红包
          <a-icon class="deleteIcon" type="delete" style="font-size: 18px; margin: 0 5px" @click="deleteNumList(item, index)" />
          <a-icon class="addIcon" type="plus-circle" style="font-size: 18px; margin-left: 10px" @click="createNumList" />
        </div>
        <!-- 离职倒扣新增条件 -->
        <div>
          <a-checkbox :checked="checked1" @change="onChange1" style="margin-top: 15px">
            离职倒扣
          </a-checkbox>
        </div>
        <div style="margin: 15px 0" v-if="checked1">
          <a-dropdown>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1"> 不满月/天/工时倒扣工资 </a-menu-item>
              <a-menu-item key="2"> 不满月/天/工时减少全价 </a-menu-item>
            </a-menu>
            <a-button type="primary" ghost><a-icon type="plus" />新增倒扣条件</a-button>
          </a-dropdown>
        </div>
        <div style="margin-top: 15px" v-for="(item, index) in leaveList" :key="'info2-' + index">
          不满
          <a-input-number :min="0" style="width: 88px; margin: 0 5px" v-model="item.number" />
          <a-select style="width: 108px; margin: 0 5px" v-model="item.units">
            <a-select-option v-for="(item, index) in option" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
          <span v-if="item.type === '1'">
            倒扣
            <a-input-number style="width: 88px; margin: 0 5px" :min="1" v-model="item.deductAmount" />
            元工资
          </span>
          <span v-if="item.type === '2'">
            工价变为
            <a-input-number style="width: 88px; margin: 0 5px" :min="1" v-model="item.newHourAmount" />
            元/小时
          </span>
          <a-icon class="deleteIcon" type="delete" style="font-size: 18px; margin-left: 10px" @click="deleteleaveList(item, index)" />
        </div>
      </div>
      <div
        :style="{
          position: 'absolute',
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e8e8e8',
          padding: '10px 16px',
          textAlign: 'center',
          left: 0,
          background: '#fff',
          borderRadius: '0 0 4px 4px'
        }"
      >
        <a-button style="margin-right: 20px" @click="visible = false"> 取消 </a-button>
        <a-button type="primary" @click="onClose"> 确定 </a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import { salaryCalculateRules } from "@/api/outsourcing/outrules";
export default {
  data() {
    return {
      option2: [
        {
          label: "月",
          value: 1
        },
        {
          label: "天",
          value: 3
        }
      ],
      name: "",
      hourAmount: "",
      hourAmountDouble: "",
      ruleType: "1",
      title: "",
      placement: "right",
      labourList: [],
      visible: false,
      checked: false,
      checked1: false,
      numList: [],
      leaveList: [],
      option: [
        {
          label: "月",
          value: 1
        },
        {
          label: "天",
          value: 2
        },
        {
          label: "工时",
          value: 3
        }
      ]
    };
  },
  methods: {
    limitNumber(value) {
      if (typeof value === "string") {
        return !isNaN(Number(value)) ? value.replace(/\./g, "") : 0;
      } else if (typeof value === "number") {
        return !isNaN(value) ? String(value).replace(/\./g, "") : 0;
      } else {
        return 0;
      }
    },
    tabsChange(e) {
      this.hourAmountDouble = 0;
      this.labourList = [];
      this.numList = [];
      this.leaveList = [];
      this.checked = false;
      this.checked1 = false;
    },
    // 获取数组里的每一个时间
    onDateChange(date, dateString, item) {
      item.time = dateString;
    },
    // 添加规则
    onClose() {
      var num = 0;
      var num1 = 0;
      if (this.ruleType === "1" || this.ruleType === "4") {
        // 判断规则名称有没有
        if (this.name !== "") {
          this.showName = true;
        } else {
          this.showName = false;
          this.$message.error("请填写规则名称");
        }
        // 当规则名称存在,并且红包和倒扣没有的时候执行
        if (this.showName && !this.checked && !this.checked1) {
          this.createList();
        }
        // 判断有没有红包规则
        if (this.checked) {
          if (this.numList.length > 0) {
            this.numList.map(res => {
              if (res.number === null || res.units === "" || res.redPacketAmount === null) {
                this.$message.error("红包规则内容都为必填");
              } else {
                num += 1;
              }
            });
          }
        }
        // 当规则名称和红包规则存在,并且倒扣没有的时候执行
        if (this.showName && this.checked && !this.checked1) {
          if (num === this.numList.length) {
            this.createList();
          }
        }
        // 判断有没有倒扣规则
        if (this.checked1) {
          if (this.leaveList.length > 0) {
            this.leaveList.map(res => {
              if (res.type === "1") {
                if (res.number === null || res.units === "" || res.deductAmount === null) {
                  this.$message.error("倒扣规则内容都为必填");
                } else {
                  num1 += 1;
                }
              } else if (res.type === "2") {
                if (res.number === null || res.units === "" || res.newHourAmount === null) {
                  this.$message.error("倒扣规则内容都为必填");
                } else {
                  num1 += 1;
                }
              }
            });
          }
        }
        // 当规则名称和红包、倒扣规则都存在
        if (this.showName && this.checked && this.checked1) {
          if (num1 === this.leaveList.length && num === this.numList.length) {
            this.createList();
          }
        }
        // 当规则名称和倒扣规则存在,并且红包规则没有的时候执行
        if (this.showName && this.checked1 && !this.checked) {
          if (num1 === this.leaveList.length) {
            this.createList();
          }
        }
      } else {
        if (this.name !== "") {
          const objs = {
            name: this.name,
            ruleType: 3
          };
          salaryCalculateRules(objs).then(res => {
            if (res.code === 200) {
              this.$message.success("添加成功");
              this.visible = false;
              this.$emit("update");
            }
          });
        } else {
          this.$message.error("请填写规则名称");
        }
      }
    },
    // 添加规则方法
    createList() {
      const labourList = JSON.parse(JSON.stringify(this.labourList)); // 工价数组
      const leaveList = JSON.parse(JSON.stringify(this.leaveList)); // 倒扣数组
      labourList.map(item => {
        item.type = Number(item.type);
      });
      leaveList.map(item => {
        item.type = Number(item.type);
      });
      const obj = {
        name: this.name,
        hourAmountDouble: this.hourAmountDouble,
        hourAmountRule: JSON.stringify(labourList),
        leaveOfficeRule: JSON.stringify(leaveList),
        redPacketRule: JSON.stringify(this.numList),
        ruleType: 1,
        showType: this.ruleType === "4" ? 1 : 2
      };
      salaryCalculateRules(obj).then(res => {
        if (res.code === 200) {
          this.$message.success("添加成功");
          this.visible = false;
          this.$emit("update");
        }
      });
    },
    // 添加事件
    onCreate() {
      this.title = "新增工价规则";
      this.visible = true;
      this.ruleType = "1";
      this.clear();
    },
    // 清空内容
    clear() {
      this.name = "";
      this.hourAmountDouble = "";
      this.checked = false;
      this.checked1 = false;
      this.labourList = [];
      this.numList = [];
      this.leaveList = [];
    },
    // 一次性红包添加事件
    onChange(e) {
      if (e.target.checked) {
        this.numList.push({ number: null, units: "", redPacketAmount: null });
        this.checked = true;
      } else {
        this.numList = [];
        this.checked = false;
      }
    },
    // 离职倒扣添加事件
    onChange1(e) {
      if (e.target.checked) {
        this.checked1 = true;
      } else {
        this.checked1 = false;
        this.leaveList = [];
      }
    },
    // 一次性红包数组
    createNumList() {
      this.numList.push({ number: null, units: "", redPacketAmount: null });
    },
    // 一次性红包删除
    deleteNumList(item, index) {
      this.numList.splice(index, 1);
      if (this.numList.length === 0) {
        this.checked = false;
      }
    },
    //  离职倒扣删除
    deleteleaveList(item, index) {
      this.leaveList.splice(index, 1);
      if (this.leaveList.length === 0) {
        this.checked1 = false;
      }
    },
    // 工价计算删除
    deletelabourList(item, index) {
      this.labourList.splice(index, 1);
    },
    // 倒扣数组
    handleMenuClick(e) {
      if (e.key === "1") {
        this.leaveList.push({
          type: e.key,
          number: null,
          units: "",
          deductAmount: null
        }); // 不满月/天/工时倒扣工资
      } else {
        this.leaveList.push({
          type: e.key,
          number: null,
          units: "",
          newHourAmount: null
        }); // 不满月/天/工时减少全价
      }
    },
    // 工价计算数组
    handleMenuClick1(e) {
      if (e.key === "2") {
        this.labourList.push({
          type: e.key,
          number: null,
          units: "",
          newHourAmount: null
        }); // 不满月/天/工时倒扣工资
      } else {
        this.labourList.push({
          type: e.key,
          time: null,
          newHourAmount: null
        }); // 不满月/天/工时减少全价
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.shu {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
  .shuxian {
    width: 3px;
    height: 20px;
    background: var(--primary);
  }
}
.deleteIcon:hover {
  color: #fa5051;
}
.addIcon {
  color: var(--primary);
}
</style>
